import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaTools } from 'ecCom';
import { WeaMessageCenter } from 'comsMobx';

import { WeaFavourite, WeaPlugin, WeaLicense, WeaVersion, WeaSystemSetting } from 'weaPortalPublic';

@inject('portalThemeStore')
@observer
class E9ToolBar extends React.Component {
  constructor(props) {
    super(props);
    this.onMenuClick = this.onMenuClick.bind(this);
  }

  componentWillMount() {
    const { portalThemeStore } = this.props;
    portalThemeStore.getToolbarMenu();
  }

  render() {
    const { portalThemeStore } = this.props;
    const { toolbarMenu = [] } = portalThemeStore;
    const _toolbarMenu = toJS(toolbarMenu);

    return (
      <div className="e9header-toolbar">
        {_toolbarMenu.map((item, index) => {
          const { key, type, name, icon } = item;
          let iconCom = <i className={`wevicon-toolbar-${key}`} />;
          if (icon) {
            iconCom = <img src={icon} alt="" width="18px" height="18px" />;
          }
          if (key && key.indexOf('more_') != -1) {
            iconCom = <i className={icon} />;
          }

          if (type == 'message') {
            const messageIconStyle = {
              position: 'absolute',
              top: '50%',
              left: '50%',
              marginTop: '-9px',
              marginLeft: '-9px',
              fontSize: '18px',
            };
            return (
              <div key={index} className="e9header-remind-icon" title={name}>
                <WeaMessageCenter.DialogComponent
                  ecId={`${(this && this.props && this.props.ecId) || ''}_WeaMessageCenter.DialogComponent@ej5m6d`}
                  iconClass={item.icon}
                  iconStyle={messageIconStyle}
                />
              </div>
            );
          } else if (type == 'fav') {
            return (
              <div key={index} className="e9header-toolbar-item-icon" title={name}>
                <WeaFavourite ecId={`${(this && this.props && this.props.ecId) || ''}_WeaFavourite@1nd6nl`}>{iconCom}</WeaFavourite>
              </div>
            );
          }
          return (
            <div key={index} className="e9header-toolbar-item-icon" title={name} onClick={() => this.onMenuClick(item)}>
              {iconCom}
            </div>
          );
        })}
        <WeaPlugin ecId={`${(this && this.props && this.props.ecId) || ''}_WeaPlugin@gjcy9m`} ref="WeaPlugin" />
        <WeaLicense ecId={`${(this && this.props && this.props.ecId) || ''}_WeaLicense@d2325g`} ref="WeaLicense" />
        <WeaVersion ecId={`${(this && this.props && this.props.ecId) || ''}_WeaVersion@vln1iz`} ref="WeaVersion" />
        <WeaSystemSetting ecId={`${(this && this.props && this.props.ecId) || ''}_WeaSystemSetting@snfnz2`} ref="WeaSystemSetting" />
      </div>
    );
  }

  onMenuClick(item) {
    let { key, id, name, url, mobxrouteurl, opentype, width = 700, height = 500 } = item;

    if (key == 'elink' || key == 'rtx') {
      if (window.checkRTXLoginUrl && typeof window.checkRTXLoginUrl == 'function') {
        window.checkRTXLoginUrl(url);
      }
      return;
    }

    if (opentype == '1') {
      if (id == '3' || id == '5' || id == '6' || id == '8') {
        const ref = { '3': 'WeaPlugin', '5': 'WeaLicense', '6': 'WeaVersion', '8': 'WeaSystemSetting' }[id];
        this.refs[ref].onShow();
      } else {
        const dialog = WeaTools.createDialog({
          title: name,
          url,
          icon: 'icon-coms-content',
          iconBgcolor: '#1a57a0',
          style: { width, height },
          parentClassName: 'e9header-toolbar-dialog',
        });
        dialog.show();
      }
    } else {
      const { portalThemeStore } = this.props;
      portalThemeStore.onLoadMain({ url, mobxrouteurl, target: opentype == '0' ? '_blank' : 'mainFrame' });
    }
  }
}

export default E9ToolBar;
